<template>
    <div class="person">
        <h2>sum: {{ sum }}</h2>
        <button @click="add">sum+1</button>
    </div>
</template>

<!-- vue2 的写法 -->
<script lang="ts">
export default {
    name: 'Person',
}
</script>

<script setup lang="ts">
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
let sum = ref(0)
function add() {
    sum.value++
}

// 创建
// vue3没有beforeCreate和created,而是有setup,介于beforeCreate和created之间
console.log("child create")
// 挂载
onBeforeMount(() => {
    console.log("child beforeMount")
})
onMounted(() => {
    console.log("child mounted")
})
// 更新
onBeforeUpdate(() => {
    console.log("child beforeUpdate")
})
onUpdated(() => {
    console.log("child updated")
})
// 销毁
onBeforeUnmount(() => {
    console.log("child beforeUnmount")
})
onUnmounted(() => {
    console.log("child unmounted")
})
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 2px;
}

li {
    font-size: 15px;
}
</style>